<template>
  <a-form
    :model="formState"
    ref="formDataRef"
    name="basic"
    :label-col="{ style: 'width:145px' }"
    :wrapper-col="{ style: 'calc(100% - 145px)' }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-spin :spinning="loading">
      <div class="title">基础信息</div>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="渠道名称" name="channelName" :rules="[{ required: true, message: '请填写渠道名称!' }]">
            <a-input v-model:value="formState.channelName" :maxlength="30" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="渠道分类" name="channelAllocation" :rules="[{ required: true, message: '请选择渠道分类!' }]">
            <a-select v-model:value="formState.channelAllocation" placeholder="请输入">
              <a-select-option v-for="item in dataDict['CHANNEL_ALLOCATION']" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="派送类型" name="deliveryType" :rules="[{ required: true, message: '请选择派送类型!' }]">
            <a-select v-model:value="formState.deliveryType" placeholder="请输入">
              <a-select-option v-for="item in dataDict['DELIVERY_METHOD']" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="运输类型" name="transportType" :rules="[{ required: true, message: '请选择运输类型!' }]">
            <a-select v-model:value="formState.transportType" placeholder="请输入">
              <a-select-option v-for="item in dataDict['TRANSPORT_TYPE']" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="交税方式" name="taxPaymentMethod" :rules="[{ required: true, message: '请选择交税方式!' }]">
            <a-select v-model:value="formState.taxPaymentMethod" mode="multiple" :maxTagCount="1" placeholder="请输入">
              <a-select-option v-for="item in dataDict['TAX_PAYMENT_METHOD']" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="报关方式" name="customsDeclarationMethod" :rules="[{ required: true, message: '请选择报关方式!' }]">
            <a-select v-model:value="formState.customsDeclarationMethod" mode="multiple" :maxTagCount="1" placeholder="请输入">
              <a-select-option v-for="item in dataDict['CUSTOMS_DECLARATION_METHOD']" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="快递公司" name="expressCompany" :rules="[{ required: false, message: '请选择快递公司!' }]">
            <a-select v-model:value="formState.expressCompany" mode="multiple" :maxTagCount="1" placeholder="请输入">
              <a-select-option v-for="item in dataDict['EXPRESS_COMPANY']" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="币种" name="currency" :rules="[{ required: true, message: '请选择币种!' }]">
            <a-select v-model:value="formState.currency" placeholder="请输入">
              <a-select-option v-for="item in dataDict['CURRENCY']" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="接收材质" name="materialQualityIdList" :rules="[{ required: true, message: '请选择接收材质!' }]">
            <a-select v-model:value="formState.materialQualityIdList" mode="multiple" :maxTagCount="1" placeholder="请输入">
              <a-select-option v-for="item in materialOpts" :key="item.id" :label="item.material" :value="item.id">{{ item.material }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="国家" name="countryRegionIdList" :rules="[{ required: true, message: '请选择国家!' }]">
            <a-select v-model:value="formState.countryRegionIdList" mode="multiple" :maxTagCount="1" placeholder="请输入">
              <a-select-option v-for="item in countryOpts" :key="item.id" :label="item.region" :value="item.id">{{ item.region }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="单号前缀" name="waybillPrefix" :rules="[{ required: true, message: '请填写单号前缀!' }]">
            <a-input v-model:value="formState.waybillPrefix" :maxlength="30" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <div class="title">计算规则</div>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="计泡系数" name="countingRatio" :rules="[{ required: true, message: '请填写计泡系数!' }]">
            <a-input-number v-model:value="formState.countingRatio" :max="9999999" :min="0.01" :precision="2" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="计重方式" name="weightCalculationMethod" :rules="[{ required: true, message: '请选择计重方式!' }]">
            <a-select v-model:value="formState.weightCalculationMethod" placeholder="请输入">
              <a-select-option v-for="item in dataDict['WEIGHT_CALCULATION_METHOD']" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="多件计重方式" name="multipleWeightingMethod" :rules="[{ required: formState.weightCalculationMethod === 'WEIGHT', message: '请选择计重方式!' }]">
            <a-select v-model:value="formState.multipleWeightingMethod" placeholder="请输入">
              <a-select-option v-for="item in dataDict['MULTIPLE_WEIGHT_METHOD']" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="分泡比例" name="splitFoamRatio" :rules="[{ required: false, message: '请填写分泡比例!' }]">
            <a-input-number v-model:value="formState.splitFoamRatio" :max="99" :min="0.01" :precision="2" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="密度比" name="densityRatio" :rules="[{ required: false, message: '请填写密度比!' }]">
            <a-input-number v-model:value="formState.densityRatio" :max="9999" :min="0.01" :precision="2" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="最低箱计费重" name="minBoxCalculateWeight" :rules="[{ required: false, message: '请填写最低箱计费重!' }]">
            <a-input-number v-model:value="formState.minBoxCalculateWeight" :max="999999" :min="0.01" :precision="2" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="最低票结算重" name="minBatchBalanceWeight" :rules="[{ required: false, message: '请填写最低票结算重!' }]">
            <a-input-number v-model:value="formState.minBatchBalanceWeight" :max="999999" :min="0.01" :precision="2" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="单箱材积进位规则" name="volumeCalculateRule" :rules="[{ required: true, message: '请选择单箱材积进位规则!' }]">
            <a-select v-model:value="formState.volumeCalculateRule" placeholder="请输入">
              <a-select-option v-for="item in dataDict['VOLUMN_CARRY_RULE']" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="票结算重进位" name="batchBalanceCalculateRule" :rules="[{ required: true, message: '请选择票结算重进位!' }]">
            <a-select v-model:value="formState.batchBalanceCalculateRule" placeholder="请输入">
              <a-select-option v-for="item in dataDict['TICKET_SETTLEMENT_RECARRY']" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="单箱结算重进位规则" name="weightCalculateRule" :rules="[{ required: false, message: '请选择单箱结算重进位规则!' }]">
            <a-select v-model:value="formState.weightCalculateRule" placeholder="请输入" allowClear>
              <a-select-option label="0.5" :value="0.5">0.5</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <div class="title">其他规则</div>
      <a-row :gutter="16" style="margin-bottom: 48px">
        <a-col :span="12">
          <a-form-item label="PO Number必填" name="poNumber" :rules="[{ required: true, message: '请选择PO Number是否必填!' }]">
            <a-select v-model:value="formState.poNumber" placeholder="请输入">
              <a-select-option label="是" :value="1">是</a-select-option>
              <a-select-option label="否" :value="0">否</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="可见客户" name="customerIdList">
            <a-select v-model:value="formState.customerIdList" placeholder="请选择" mode="multiple" :max-tag-count="3" :filter-option="filterOption" show-search>
              <a-select-option v-for="item in customerIdOpts" :key="item.id" :label="item.shortName" :value="item.id">{{ item.shortName }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <div class="title">渠道绑定</div>
      <a-row :gutter="16" style="margin-bottom: 48px">
        <a-col :span="12">
          <a-form-item label="代理" name="outWarehouseId" :rules="[{ required: false, message: '请选择渠道!' }]">
            <a-select v-model:value="formState.outWarehouseId" placeholder="请输入" @change="(value:number)=>getChannelAgent(value)">
              <a-select-option v-for="item in cannelOpts" :key="item.code" :label="item.name" :value="item.id">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="代理渠道" name="agentChannelId" :rules="[{ required: false, message: '请选择代理渠道' }]">
            <a-select v-model:value="formState.agentChannelId" placeholder="请输入" showSearch :filter-option="filterOption">
              <a-select-option v-for="item in agentCannelOpts" :key="item.code" :label="item.agentChannelName" :value="item.agentChannelId">{{ item.agentChannelName }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="推单类型代理" name="pushOrdersType" :rules="[{ required: false, message: '请选择推单类型代理!' }]">
            <a-select v-model:value="formState.pushOrdersType" placeholder="请输入">
              <a-select-option label="拣货代理" :value="0">拣货代理</a-select-option>
              <a-select-option label="出仓心一/出仓天图" :value="1">出仓心一/出仓天图</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </a-spin>
    <a-form-item :wrapper-col="{ span: 24 }" class="submit-btn-form-item">
      <a-button type="primary" html-type="submit">确定</a-button>
      <a-button @click="resetHandle">取消</a-button>
    </a-form-item>
  </a-form>
</template>
<script lang="ts" setup>
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { getChannelInfoApi } from "@/api/configCenter/warehouseEntryChannel";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: CustomerManagement.ListRows;
    type: number;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void;
  (e: "submit"): void;
}>();
const { visible, passData, type } = toRefs(props);
const {
  dataDict,
  formDataRef,
  formState,
  countryOpts,
  getAllCountry,
  materialOpts,
  getAllMasterial,
  loading,
  cannelOpts,
  agentCannelOpts,
  getChannel,
  getChannelAgent,
  getAllCustomerIdList,
  customerIdOpts
} = InitHook();
const { onFinish, resetFields, onFinishFailed, resetHandle } = OperationHook({ formDataRef, formState, passData, type, emit, loading, agentCannelOpts });
const init = () => {
  getChannel();
  getAllMasterial();
  getAllCountry();
  getAllCustomerIdList();
  if (type.value === 2) {
    loading.value = true;
    getChannelInfoApi(passData.value.id)
      .then((res: any) => {
        const { code, data } = res;
        if (code === 200) {
          Object.assign(formState, data);
          if (formState.expressCompany) formState.expressCompany = data.expressCompany.split(",");
          else formState.expressCompany = [];
          if (formState.customsDeclarationMethod) formState.customsDeclarationMethod = data.customsDeclarationMethod.split(",");
          if (formState.taxPaymentMethod) formState.taxPaymentMethod = data.taxPaymentMethod.split(",");
          if (data.outWarehouseId) getChannelAgent(data.outWarehouseId);
        }
      })
      .finally(() => (loading.value = false));
  }
};

const filterOption = (input: string, option: any) => {
  return option.label.indexOf(input) >= 0;
};

watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init();
    } else {
      resetFields();
      formDataRef.value.clearValidate();
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
.title{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}
:deep(.ant-input-number){
    width: 100%;
}
.submit-btn-form-item{
    position: absolute;
    width: 100%;
    padding: 12px;
    bottom: 0px;
    left: 0px;
    text-align: center;
    background-color: #fff;
}
</style>
